import React, { Suspense } from 'react';
import { Routes, Route, Navigate, useLocation, useNavigate } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import { platformIntegrationMenus } from '../../constants/platformIntegrationMenus';
import Overview from './Overview';
import PlatformList from './PlatformList';
import NodeManagement from './NodeManagement';
import InterfaceManagement from './InterfaceManagement';

const { Sider, Content } = Layout;

const PlatformIntegration: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();

  const handleMenuClick = ({ key }: { key: string }) => {
    navigate(key);
  };

  return (
    <Layout style={{ height: '100%' }}>
      <Sider width={200} theme="light">
        <Menu
          mode="inline"
          selectedKeys={[location.pathname]}
          style={{ height: '100%', borderRight: 0 }}
          items={platformIntegrationMenus}
          onClick={handleMenuClick}
        />
      </Sider>
      <Layout style={{ padding: '0 24px 24px' }}>
        <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
          <Suspense fallback={<div>Loading...</div>}>
            <Routes>
              <Route path="/" element={<Navigate to="platformList" replace />} />
              <Route path="overview" element={<Overview />} />
              <Route path="platformList" element={<PlatformList />} />
              <Route path="nodeManagement" element={<NodeManagement />} />
              <Route path="interfaceManagement" element={<InterfaceManagement />} />
              <Route path="*" element={<Navigate to="platformList" replace />} />
            </Routes>
          </Suspense>
        </Content>
      </Layout>
    </Layout>
  );
};

export default PlatformIntegration;